<html>
  <head>
	<title>Response Time Gadget</title>
	<script type="text/javascript" src="d3.v2.js"></script>
	<style>
	path {
	    stroke: red;
	    stroke-width: 2;
	    fill: none;
	}

	line {
	    stroke: black;
	}

	text {
	    font-family: Arial;
	    font-size: 9pt;
	}
	</style>
  </head>
	
  <body>
	
	<script type="text/javascript">
		function drawLine() {
			var duration, timestamp, width, height, margin, x, y, data;
			var vis, g, line;
			duration = [200, 100, 310, 120, 230, 50, 390];
			timestamp = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
			width = 400;
			height = 200;
			margin = 20;
			y = d3.scale.linear().domain([0, d3.max(duration)]).range([0 + margin, height - margin]);
			x = d3.scale.linear().domain([0, timestamp.length]).range([0 + margin, width - margin]);
			
			vis = d3.select("body")
					.append("svg:svg")
					.attr("width", width)
					.attr("height", height);
					
			g = vis.append("svg:g").attr("transform", "translate(0, 200)");
			
			line = d3.svg.line().x(function(d,i){return x(i);})
								.y(function(d,i) {return -1 * y(d);});

			
			g.append("svg:path").attr("d", line(duration));
			
			g.append("svg:line").attr("x1", x(0)).attr("y1", -1 * y(0))
								.attr("x2", x(width)).attr("y2", -1 * y(0));
								
			g.append("svg:line").attr("x1", x(0)).attr("y1", -1 * y(0))
								.attr("x2", x(0)).attr("y2", -1 * y(d3.max(duration)));
			
			g.selectAll(".xLabel").data(x.ticks(timestamp.length))
								  .enter().append("svg:text")
								  .attr("class", "xLabel").text(function(d){return timestamp[d];})
								  .attr("x", function(d){ return x(d)})
								  .attr("y", 0).attr("text-anchor", "middle");
								
			g.selectAll(".yLabel").data(y.ticks(4))
								  .enter().append("svg:text")
								  .attr("class", "yLabel").text(String)
								  .attr("x", 0).attr("y", function(d) {return -1 * y(d)})
								  .attr("text-anchor", "right").attr("dy", 4);
			
			
			g.selectAll(".xTicks").data(x.ticks(timestamp.length)).enter().append("svg:line")
								  .attr("class", "xTicks")
								  .attr("x1", function(d) {return x(d); })
								  .attr("y1", -1 * y(0))
								  .attr("x2", function(d) {return x(d); })
								  .attr("y2", -1 * y(-10));

			g.selectAll(".yTicks").data(y.ticks(4)).enter().append("svg:line")
								  .attr("class", "yTicks")
								  .attr("y1", function(d) {return -1 * y(d); })
								  .attr("x1", x(-0.2))
								  .attr("y2", function(d) {return -1 * y(d); })
								  .attr("x2", x(0));
								
		}
		
		drawLine();
	</script>
  </body>	

</html>